<%@page import="com.jsz.peini.common.util.PeiniUtils"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'detail.jsp' starting page</title>
    
	<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" />
	<link rel="stylesheet" href=" dist/css/swiper.min.css">
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<link rel="stylesheet" type="text/css" href="css/index-act.css">
		<style>


    .opacity{
        -webkit-animation: opacity 0.3s linear;
        animation: opacity 0.3s linear;
    @-webkit-keyframes opacity {
        0% {
            opacity:0;
        }
        100% {
            opacity:1;
        }
    }
    @keyframes opacity {
        0% {
            opacity:0;
        }
        100% {
            opacity:1;
        }
    }
	}
    </style>
    <link rel="stylesheet" href=" dist/dropload.css">
	<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript">
	
	$(function() {
		$(".choice>li").click(function(event) {
			
			$(".bomb ul").eq($(this).index()).show()
		});
		$(".bomb ul>li").click(function(event) {
			$(".bomb ul").hide();
		});
	});
	</script>
	<script type="text/javascript">	
	localStorage.userId = "${sessionScope.userId}";
	localStorage.xpoint = "${sessionScope.xpoint}";
	localStorage.ypoint = "${sessionScope.ypoint}";
	
	function toDetail(acId,status){//alert(acId+status);
		var mdate = {
        		"acId":acId,
        		"userId":localStorage.userId
        	};
		$.ajax({
            type: 'GET',
            url: '<%=path %>/activity/isReg',
            data:mdate,
            dataType: 'json',
            success: function(data){
            	if(data.resultCode == 1){
            		var url = "<%=path %>/activity/detail?userId="+localStorage.userId+"&id="+acId+"&status="+status+"&isReg="+data.isReg;
            		//alert(url);
            		location.href = url;
            	}
            }
        });
	}
	
	function toUrl(url){//alert(url);
		if(url != ''){
		    url+="?userId="+localStorage.userId;
			location.href=url;//toUrl('${info.adLink}')
		}
	}
	</script>

  </head>
  
  <body>
  	<c:if test="${fn:length(ads) > 0 }">
	  	<section class="ban">
		 	  <div class="swiper-container">
			        <div class="swiper-wrapper">
			        	<c:forEach items="${ads }" var="adv">
			        		<c:set var="adLink" value="${adv['adLink'] }"></c:set>
			        		<div class="swiper-slide "><img src="<%=PeiniUtils.IMGHOST %>${adv['adImgUrl'] }" onclick="toUrl('${adLink}')"></div>
			        	</c:forEach>
			        </div>
			        <div class="swiper-pagination"></div>
			  </div>
		 </section>
	 </c:if>
	 <section class="cod-det">
	 	<div>
	 		<div class="wi-txt"><span>进行中活动${sessionScope.totalCnt }个，我参与${sessionScope.regCnt }个</span><ul class="choice"><li>排序</li><li>筛选</li></ul></div>
	 		<ul class="lists">
	 			<c:forEach items="${list }" var="info">
	 				<li>
		 				<div class="ade-tu">
		 					<img src="<%=PeiniUtils.IMGHOST %>${info.acImg }" alt="" onclick="toDetail('${info.acId}','${info.acStatus}')">
		 				</div>
		 				<div class="ade-w">
		 					<div class="ad-title">
		 						<span onclick="toDetail('${info.acId}','${info.acStatus}')">${info.acTitle }</span>
		 					</div>
		 					<div class="la">
		 						<em>${info.acTag }</em>
		 						<em class="fre">
		 							<c:choose>
		 								<c:when test="${info.acFee == 0}">
		 									免费
		 								</c:when>
		 								<c:otherwise>
		 									¥<fmt:formatNumber value="${info.acFee/100 }"/>
		 								</c:otherwise>
		 							</c:choose>
		 						</em>
		 					</div>
	
		 					<div class="ad-adres">
		 						${info.describe }${info.acAddress }
		 					</div>
		 					<div class="ad-state">
		 						<c:choose>
		 							<c:when test="${info.acStatus == 0 }">
		 								报名中
		 							</c:when>
		 							<c:when test="${info.acStatus == 2 }">
		 								报名已结束
		 							</c:when>
		 							<c:when test="${info.acStatus == 1 }">
		 								活动中
		 							</c:when>
		 							<c:when test="${info.acStatus == 5 }">
		 								已报名
		 							</c:when>
		 							<c:when test="${info.acStatus == 4 }">
		 								报名已满
		 							</c:when>
		 							<c:when test="${info.acStatus == -1 }">
		 								已结束
		 							</c:when>
		 						</c:choose>
		 					</div>
		 				</div>
		 			</li>
	 			</c:forEach>
	 		</ul>
	 	</div>
	 </section>
	 <section class="bomb"> 
	 	<div>
	 		<ul>
	 			<li onclick="acsort(1)">热门推荐</li>
	 			<li onclick="acsort(2)">距离最近</li>
	 			<li onclick="acsort(3)">时间最近</li>
	 			<li>取消</li>
	 		</ul>
	 		<ul>
	 		    <li onclick="actype(3)">全部</li>
	 			<li onclick="actype(100)">我参与的</li>
	 			<li onclick="actype(0)">报名中</li>
	 			<li onclick="actype(1)">活动中</li>
	 			<li onclick="actype(2)">报名已结束</li>
 	 			<li onclick="actype(-1)">已结束</li>
	 			<li>取消</li>
	 		</ul>
	 	</div>
	 </section>
	 <script src=" dist/js/swiper.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
      if($(".swiper-slide").length > 1) {
         var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        paginationClickable: true,
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: 2500,
        autoplayDisableOnInteraction: false,
         slidesPerView: 1,
        loop: true,
        observer: true, 
       observeParents: true, 
         });
    }
    else{
        var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        paginationClickable: true,
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: false,
        autoplayDisableOnInteraction: false,
         slidesPerView: 1,
        loop: true,
        noSwiping : true,
        observer: true, 
       observeParents: true, 
         });
    }
    </script>
	 <script src="dist/dropload.min.js"></script>
	<script>
	// 页数
    var page = 1;
    // 每页展示10个
    var size = 10;
    var sort = 3;
    var type = 999;
    
    function acsort(index){
        
          sort = index;
      
    	var mdate = {
        		"page":1,
        		"rows":10,
        		"sort":sort,
        		"type":type,
        		"xpoint":localStorage.xpoint,
        		"ypoint":localStorage.ypoint,
        		"userId":localStorage.userId
        	};
    	var result = "";
        $.ajax({
            type: 'GET',
            url: 'activity/listJson',
            data:mdate,
            dataType: 'json',
            success: function(data){
            	var result = '';
                for(var i = 0; i < data.lists.length; i++){
                	result += '<li>';
                	result += '<div class="ade-tu">';
                	result += '<img src="'+data.lists[i].acImg+'" alt="" onclick="toDetail(\''+data.lists[i].acId+'\',\''+data.lists[i].acStatus+'\')">';
                	result += '</div>';
                	result += '<div class="ade-w">';
                	result += '	<div class="ad-title" onclick="toDetail(\''+data.lists[i].acId+'\',\''+data.lists[i].acStatus+'\')">';
                	result += '<span>'+data.lists[i].acTitle+'</span>';
                	result += '</div>';
                	result += '<div class="la">';
                	result += '<em>'+data.lists[i].acTag+'</em><em class="fre">';
                	if(data.lists[i].acFee == '0.00'){
                		result += '免费';
                	}else{
                		result += data.lists[i].acFee;
                	}
                	result += '</em>';
                	result += '</div>';
                	result += '<div class="ad-adres">';
                	result += data.lists[i].describe+data.lists[i].acAddress;
                	result += '</div>';
                	result += '<div class="ad-state">';
                	if(data.lists[i].acStatus == '0'){
                		result += '报名中';
                	}else if(data.lists[i].acStatus == '1'){
                		result += '活动中';
                	}else if(data.lists[i].acStatus == '4'){
                		result += '报名已满';
                	}else if(data.lists[i].acStatus == '5'){
                		result += '已报名';
                	}
                	else if(data.lists[i].acStatus == '2'){
                		result += '报名已结束';
                	}else if(data.lists[i].acStatus == '-1'){
                		result += '已结束';
                	}
                	result += '</div>';
                	result += '</div>';
                	result += '</li>';
                }
                // 为了测试，延迟1秒加载
                setTimeout(function(){
                    $('.lists').html(result);
                    // 每次数据加载完，必须重置
                    me.resetload();
                    // 重置页数，重新获取loadDownFn的数据
                    page = 0;
                    // 解锁loadDownFn里锁定的情况
                    me.unlock();
                    me.noData(false);
                },1000);
            }
        });
    }
    
    function actype(index){
        if(index==3)
        {
          type=999;
        }
        else
        {
        	type = index;
        }
    	var mdate = {
        		"page":1,
        		"rows":10,
        		"sort":sort,
        		"type":type,
        		"xpoint":localStorage.xpoint,
        		"ypoint":localStorage.ypoint,
        		"userId":localStorage.userId
        	};
    	var result = "";
        $.ajax({
            type: 'GET',
            url: 'activity/listJson',
            data:mdate,
            dataType: 'json',
            success: function(data){
            	var result = '';
                for(var i = 0; i < data.lists.length; i++){
                	result += '<li>';
                	result += '<div class="ade-tu">';
                	result += '<img src="'+data.lists[i].acImg+'" alt="" onclick="toDetail(\''+data.lists[i].acId+'\',\''+data.lists[i].acStatus+'\')">';
                	result += '</div>';
                	result += '<div class="ade-w">';
                	result += '	<div class="ad-title" onclick="toDetail(\''+data.lists[i].acId+'\',\''+data.lists[i].acStatus+'\')">';
                	result += '<span>'+data.lists[i].acTitle+'</span>';
                	result += '</div>';
                	result += '<div class="la">';
                	result += '<em>'+data.lists[i].acTag+'</em><em class="fre">';
                	if(data.lists[i].acFee == '0.00'){
                		result += '免费';
                	}else{
                		result += data.lists[i].acFee;
                	}
                	result += '</em>';
                	result += '</div>';
                	result += '<div class="ad-adres">';
                	result += data.lists[i].describe+data.lists[i].acAddress;
                	result += '</div>';
                	result += '<div class="ad-state">';
                	if(data.lists[i].acStatus == '0'){
                		result += '报名中';
                	}else if(data.lists[i].acStatus == '1'){
                		result += '活动中';
                	}else if(data.lists[i].acStatus == '5'){
                		result += '已报名';
                	}else if(data.lists[i].acStatus == '4'){
                		result += '报名已满';
                	}else if(data.lists[i].acStatus == '2'){
                		result += '报名已结束';
                	}else if(data.lists[i].acStatus == '-1'){
                		result += '已结束';
                	}
                	result += '</div>';
                	result += '</div>';
                	result += '</li>';
                }
                // 为了测试，延迟1秒加载
                setTimeout(function(){
                    $('.lists').html(result);
                    // 每次数据加载完，必须重置
                    me.resetload();
                    // 重置页数，重新获取loadDownFn的数据
                    page = 0;
                    // 解锁loadDownFn里锁定的情况
                    me.unlock();
                    me.noData(false);
                },1000);
            }
        });
    }

$(function(){
    
    // dropload
    $('.cod-det').dropload({
        scrollArea : window,
        domUp : {
            domClass   : 'dropload-up',
            domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
            domUpdate  : '<div class="dropload-update">↑释放更新</div>',
            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
        },
        domDown : {
            domClass   : 'dropload-down',
            domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
            domNoData  : '<div class="dropload-noData">没有更多信息了</div>'
        },
        loadUpFn : function(me){
        	var mdate = {
	        		"page":1,
	        		"rows":size,
	        		"sort":sort,
	        		"type":type,
	        		"xpoint":localStorage.xpoint,
	        		"ypoint":localStorage.ypoint,
	        		"userId":localStorage.userId
	        	};
        	var result = "";
            $.ajax({
                type: 'GET',
                url: 'activity/listJson',
                data:mdate,
                dataType: 'json',
                success: function(data){
                	var result = '';
                    for(var i = 0; i < data.lists.length; i++){
                    	result += '<li>';
                    	result += '<div class="ade-tu">';
                    	result += '<img src="'+data.lists[i].acImg+'" alt="" onclick="toDetail(\''+data.lists[i].acId+'\',\''+data.lists[i].acStatus+'\',\''+data.lists[i].isReg+'\')">';
                    	result += '</div>';
                    	result += '<div class="ade-w">';
                    	result += '	<div class="ad-title" onclick="toDetail(\''+data.lists[i].acId+'\',\''+data.lists[i].acStatus+'\',\''+data.lists[i].isReg+'\')">';
                    	result += '<span>'+data.lists[i].acTitle+'</span>';
                    	result += '</div>';
                    	result += '<div class="la">';
                    	result += '<em>'+data.lists[i].acTag+'</em><em class="fre">';
                    	if(data.lists[i].acFee == '0.00'){
                    		result += '免费';
                    	}else{
                    		result += data.lists[i].acFee;
                    	}
                    	result += '</em>';
                    	result += '</div>';
                    	result += '<div class="ad-adres">';
                    	result +=data.lists[i].describe+data.lists[i].acAddress;
                    	result += '</div>';
                    	result += '<div class="ad-state">';
                    	if(data.lists[i].acStatus == '0'){
                    		result += '报名中';
                    	}else if(data.lists[i].acStatus == '4'){
                			result += '报名已满';
                	    }else if(data.lists[i].acStatus == '5'){
                			result += '已报名';
                	    }else if(data.lists[i].acStatus == '1'){
                    		result += '活动中';
                    	}else if(data.lists[i].acStatus == '2'){
                		result += '报名已结束';
                		}else if(data.lists[i].acStatus == '-1'){
                    		result += '已结束';
                    	}
                    	result += '</div>';
                    	result += '</div>';
                    	result += '</li>';
                    }
                    // 为了测试，延迟1秒加载
                    setTimeout(function(){
                        $('.lists').html(result);
                        // 每次数据加载完，必须重置
                        me.resetload();
                        // 重置页数，重新获取loadDownFn的数据
                        page = 0;
                        // 解锁loadDownFn里锁定的情况
                        me.unlock();
                        me.noData(false);
                    },1000);
                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        },
        loadDownFn : function(me){
            // 拼接HTML
            var result = '';
            page++;
        	var mdate = {
        		"page":page,
        		"rows":size,
        		"sort":sort,
        		"type":type,
        		"xpoint":localStorage.xpoint,
        		"ypoint":localStorage.ypoint,
        		"userId":localStorage.userId
        	};
            $.ajax({
                type: 'GET',
                url: 'activity/listJson',
                data:mdate,
                dataType: 'json',
                success: function(data){
                    if(data.lists!="")
                    {}
                	var arrLen = data.lists.length;
                    if(arrLen > 0){
                    	for(var i = 0; i < data.lists.length; i++){
                    		result += '<li>';
                        	result += '<div class="ade-tu">';
                        	result += '<img src="'+data.lists[i].acImg+'" alt="" onclick="toDetail(\''+data.lists[i].acId+'\',\''+data.lists[i].acStatus+'\',\''+data.lists[i].isReg+'\')">';
                        	result += '</div>';
                        	result += '<div class="ade-w">';
                        	result += '	<div class="ad-title" onclick="toDetail(\''+data.lists[i].acId+'\',\''+data.lists[i].acStatus+'\',\''+data.lists[i].isReg+'\')">';
                        	result += '<span>'+data.lists[i].acTitle+'</span>';
                        	result += '</div>';
                        	result += '<div class="la">';
                        	result += '<em>'+data.lists[i].acTag+'</em><em class="fre">';
                        	if(data.lists[i].acFee == '0.00'){
                        		result += '免费';
                        	}else{
                        		result += data.lists[i].acFee;
                        	}
                        	result += '</em>';
                        	result += '</div>';
                        	result += '<div class="ad-adres">';
                        	result +=data.lists[i].describe+data.lists[i].acAddress;
                        	result += '</div>';
                        	result += '<div class="ad-state">';
                        	if(data.lists[i].acStatus == '0'){
                        		result += '报名中';
                        	}else if(data.lists[i].acStatus == '5'){
                				result += '已报名';
                	    	}else if(data.lists[i].acStatus == '4'){
                				result += '报名已满';
                			}else if(data.lists[i].acStatus == '1'){
                        		result += '活动中';
                        	}else if(data.lists[i].acStatus == '2'){
                		        result += '报名已结束';
                	        }else if(data.lists[i].acStatus == '-1'){
                        		result += '已结束';
                        	}
                        	result += '</div>';
                        	result += '</div>';
                        	result += '</li>';
                    	}
                    // 如果没有数据
                    }else{
                        // 锁定
                        me.lock();
                        // 无数据
                        me.noData();
                    }
                    // 为了测试，延迟1秒加载
                    setTimeout(function(){
                        // 插入数据到页面，放到最后面
                        $('.lists').append(result);
                        // 每次数据插入，必须重置
                        me.resetload();
                    },1000);
                },
                error: function(xhr, type){
                    //alert('Ajax error!');
                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        },
        threshold : 50
    });

});
</script>
  </body>
</html>
